<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "clockIcon";
            src: url(../../font/clockicons.woff2);
        }

        .clock {
            font-family: "clockIcon";
            font-size: 32px;
            margin: 20px 0;
            display: flex;
        }

        .clock .milli {
            transform: scale(0.6);
            transform-origin: left bottom;
        }
    </style>
</head>

<body>
    <div class="clock">
        <span class="minute">00</span>
        <span>:</span>
        <span class="second">00</span>
        <span>.</span>
        <span class="milli">00</span>
    </div>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
    <button class="reset">重置</button>
</body>
<script>
    var clockSpan = document.getElementsByClassName("clock")[0];
    var minuteSpan = document.getElementsByClassName("minute")[0];
    var secondSpan = document.getElementsByClassName("second")[0];
    var milliSpan = document.getElementsByClassName("milli")[0];

    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var reset = document.getElementsByClassName("reset")[0];
    console.log(minuteSpan);

    var timer = null;
    var ms = 0;
    var isStart = false;
    start.onclick = function () {
        if (isStart) {
            console.log("秒表已经启动了！");
            return false;
        }
        isStart = true;

        timer = setInterval(function () {
            ms += 10;
            var milli = parseInt(ms % 1000 / 10);
            var second = parseInt(ms / 1000) % 60;
            var minute = parseInt(ms / 1000 / 60);

            minuteSpan.innerText = beauty(minute);
            secondSpan.innerText = beauty(second);
            milliSpan.innerText = beauty(milli);
        }, 10);
    }

    pause.onclick = function () {
        clearInterval(timer);
        isStart = false;
    }

    reset.onclick = function () {
        clearInterval(timer);
        ms = 0;
        minuteSpan.innerText = "00";
        secondSpan.innerText = "00";
        milliSpan.innerText = "00";
        isStart = false;
    }

    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }
</script>

</html>